<template>
    <!-- 编辑地址 -->
  <div class="address">
      <div class="back-nav-box">
          <back-nav left-arrow left-text='返回' title='编辑地址' ></back-nav>
      </div>
      <!-- 图片 -->
        <div class="my-img">
            <img class="auto-img" :src="imgUrl" alt="">
        </div>
        <!-- 我的详情盒子 -->
        <div class="my-box">
           <div class="order-address">
               <van-address-edit
                :area-list="areaList"
                show-postal
                show-delete
                show-set-default
                show-search-result
                :address-info="addressInfo"
                :search-result="searchResult"
                :area-columns-placeholder="['请选择', '请选择', '请选择']"
                @save="onSave"
                @delete="onDelete"
                @change-detail="onChangeDetail"
                />
            </div> 
            
        </div>
      <!--  -->
      
  </div>
</template>

<script>
import { Toast } from 'vant';
import BackNav from '../components/BackNav.vue'
// 编辑地址所用到的文件
import {areaList} from '@vant/area-data';

export default {
  name:'AddressEdit',
  components: { 
    BackNav,
    },
  data() {
    return {
        imgUrl:require('../assets/images/orderbg.png'),
        areaList,
        searchResult: [],
        addressInfo:{}
    };
  },
  created(){
    this.editAddress();
  },
  methods: {
    editAddress() {
      this.axios({
        method: 'post',
        url: '/editAddress',
        data: {
          aid: this.addressInfo.id,
          name: this.addressInfo.name,
          tel: this.addressInfo.tel,
          province: this.addressInfo.province,
          city: this.addressInfo.city,
          county: this.addressInfo.county,
          addressDetail: this.addressInfo.addressDetail,
          areaCode: this.addressInfo.areaCode,
          postalCode: this.addressInfo.postalCode,
          isDefault: this.addressInfo.isDefault      
        }
      }).then(res=>{
        
      })
    },
      //组件
    onSave(content) {
      Toast('保存成功');
      // 
      let idtext=Math.random()
      idtext=idtext.toFixed(2);
      idtext=idtext*100;
      content['id']=idtext;
      for(let key in content) {
        this.addressInfo[key]=content[key];
      }
      this.$store.commit('getAddress',content);
      this.$router.push({ name:'AddressList' });
    },
    onDelete() {
      Toast('delete');
    },
    onChangeDetail(val) {
      if (val) {
            this.searchResult = [
                {
                    name: '黄龙万科中心',
                    address: '杭州市西湖区',
                },
            ];
        }   else {
            this.searchResult = [];
            }
    },
  },
};

</script>

<style lang='less' scoped>
@import url("../assets/base.less");

.address {
    position: fixed;
    top:0;
    left:0;
    right: 0;
    bottom: 0;
    background-color: #f7f7f7;
    .back-nav-box {
    position:sticky;
    top:0;
    color:@mainColor; 
    }
    .my-img {
    width:100%;
    height:100px;
    background-color: @bg_Color;
    }
    .my-box {
    margin: 0 10px;
    padding: 10px;
    background-color: rgba(255,255,255);
    position: relative;
    top:-20px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    } 
    /deep/ .van-tag--danger{
        background-color: @mainColor;
    }
    /deep/ .van-button--danger {
        background-color: @mainColor;
        border:0.02667rem solid @mainColor;
    }
    /deep/ .van-radio__icon .van-icon {
        display:none;
    }
    /deep/ .van-address-item {
        border-bottom: 1px solid #e8e8e8;
    }
}
</style>